<!--
 * @Author: your name
 * @Date: 2021-07-02 17:28:07
 * @LastEditTime: 2021-07-03 20:12:26
 * @LastEditors: hlyScarlet
 * @Description: In User Settings Edit
 * @FilePath: \briup\项目\mobile-app\src\views\homepage\Details.vue
-->
<template>
  <div>
    <div class="a">
      <span style="font-weight: 700">订 单 详 情</span>
      <van-icon name="arrow-left" @click="toBack" class="a1" />
    </div>
    <div class="mkz3" v-for="item in queryData.orderLines" :key="item.id">
      <div class="mkz1">
        <div class="img_con1">
          <van-image width="70" height="70" :src="item.product.photo" />
        </div>
        <div class="mkz1_right">
          <div class="d">
            <span>{{ item.product.name }}</span>
          </div>
          <div class="b">
            <span>{{ item.product.description }}</span>
          </div>
          <div class="c">
            <span>￥{{ item.product.price }}</span>
            <span class="c1">×{{ item.number }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="zj">
      总计:<span style="color: red"> ￥{{ money }}元</span>
    </div>
    <div class="container">
      <div v-if="queryData.address">
        <label class="left">服务地址:</label>
        <span class="right">
          {{ queryData.address.province }}{{ queryData.address.city
          }}{{ queryData.address.area }}{{ queryData.address.address }}</span
        >
      </div>
      <div v-if="queryData.customer">
        <label class="left">联系方式:</label>
        <span class="right">
          {{ queryData.customer.username }}
          ({{ queryData.customer.telephone }})</span
        >
      </div>
      <div>
        <label class="left">下单时间:</label>
        <span class="right">{{ queryData.orderTime | filteTime }}</span>
      </div>
      <div>
        <label class="left">服务时间:</label>
        <span class="right">{{ queryData.serviceTime | filteTime }}</span>
      </div>
      <div class="d">
        {{ queryData.status }}
      </div>
    </div>
  </div>
</template>
<script>
import { findById } from "@/api/order";
import Moment from "moment";
import { Toast } from 'vant';
// import Vue from 'vue'
export default {
  filters: {
    filteTime(v) {
      return Moment(v).format("YYYY-MM-DD hh:mm:ss");
    },
  },
  data() {
    return {
      queryData: {},
      money: 0,
    };
  },
  computed: {},
  methods: {
    toBack() {
      this.$router.push({
        path: "/index",
      });
    },
    async queryId() {
      Toast.loading({ message: '加载中...', forbidClick: true, overlay:true , duration:0});
      let res = await findById({ id: this.$route.query.index });
      //   console.log(this.$route.query.index);
      this.queryData = res.data;
      this.queryData.orderLines.forEach((item) => {
        this.money += item.product.price * item.number;
      });
      Toast.clear();
      //   console.log(this.queryData.orderLines);
    },
  },
  created() {
    this.queryId();
  },
  computed: {},
  mounted() {},
};
</script>

<style scoped>
.a {
  /* width: 100%; */
  width: auto;
  height: 48px;
  background-color: #7579ff;
  text-align: center;
  color: aliceblue;
  line-height: 48px;
}

.a1 {
  float: left;
  color: aliceblue;
  line-height: 48px;
  margin-left: 20px;
}
.mkz {
  width: 1400px;
  /* width: auto; */
  height: 58px;
  background-color: #7579ff;
  text-align: center;
  color: aliceblue;
  line-height: 48px;
}
.mkz1 {
  margin: 10px 10px 5px 32px;
  height: 90px;
  /* width: 1400px; */
  width: auto;
  background-color: white;
  display: flex;
  /* border: 2px solid #f00; */
  box-shadow: 0px 0px 10px rgba(128, 128, 177, 0.5);
  border-radius: 5px;
}
.img_con1 {
  padding: 10px;
  background-color: white;
}
.mkz1_right {
  width: 1370px;
  padding: 8px 20px 5px 0px;
  background-color: white;
  line-height: 25px;
}
.c1 {
  float: right;
}
.zj {
  height: 30px;
  float: right;
  line-height: 30px;
  font-size: 13px;
}
.container {
  /* width: 1360px; */
  width: auto;
  /* height: 80px; */
  /* border: 2px solid #f00; */
  box-shadow: 0px 0px 10px rgba(128, 128, 177, 0.5);
  border-radius: 5px;
  margin: 40px 10px 20px 32px;
  padding: 10px 20px 20px 20px;
  line-height: 1.2;
}
.d {
  float: right;
  font-size: 13px;
  opacity: 0.6;
}
span {
  font-size: 13px;
  opacity: 0.6;
}
label {
  font-size: 13px;
  opacity: 0.6;
}
.c {
  float: left;
  margin-top: 15px;
}
</style>